<template>
  <div class="dashboard">
    <div class="dashboard-header">
      <h1 class="page-title">实时交易看板</h1>
      <p class="page-description">策略执行动态监控 · 实时盈亏追踪</p>
      <div class="market-status">
        <el-tag :type="marketStatus.type" size="large">
          <el-icon><Clock /></el-icon>
          {{ marketStatus.text }}
        </el-tag>
        <span class="last-update">最后更新: {{ lastUpdateTime }}</span>
        <el-tag type="success" size="small">
          <el-icon><Connection /></el-icon>
          WebSocket 已连接
        </el-tag>
      </div>
    </div>

    <!-- 核心数据概览 -->
    <el-row :gutter="16" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon profit">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="stats-info">
              <h3>总收益率</h3>
              <p class="stats-value profit">{{ totalProfitRate }}%</p>
              <span class="stats-change">{{ dailyChange }} (24h)</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon asset">
              <el-icon><Wallet /></el-icon>
            </div>
            <div class="stats-info">
              <h3>总资产</h3>
              <p class="stats-value">${{ totalAssets }}</p>
              <span class="stats-change">+${{ assetChange }} (24h)</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon warning">
              <el-icon><SetUp /></el-icon>
            </div>
            <div class="stats-info">
              <h3>活跃策略</h3>
              <p class="stats-value">8</p>
              <span class="stats-change">3个盈利中</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="stats-card" shadow="hover">
          <div class="stats-content">
            <div class="stats-icon success">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stats-info">
              <h3>今日交易</h3>
              <p class="stats-value">23</p>
              <span class="stats-change">胜率: 73.9%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 实时交易流 - 独占第一栏 -->
    <el-row :gutter="16" class="trading-stream-section">
      <el-col :span="24">
        <el-card class="realtime-trading-card" shadow="hover">
          <template #header>
            <div class="card-header realtime-header">
              <div class="header-left">
                <span class="header-title">
                  <el-icon class="realtime-icon"><Position /></el-icon>
                  实时交易流
                </span>
                <el-tag type="success" size="small" class="live-tag">
                  <el-icon><VideoPlay /></el-icon>
                  LIVE
                </el-tag>
              </div>
              <div class="header-actions">
                <el-button type="text" size="small" @click="toggleAutoScroll">
                  {{ autoScroll ? '暂停滚动' : '自动滚动' }}
                </el-button>
                <el-button type="text" size="small" @click="handleExportRecords">导出记录</el-button>
                <el-button type="text" size="small" @click="handleViewAllRecords">查看全部</el-button>
              </div>
            </div>
          </template>
          
          <div class="realtime-trading-container" ref="tradingContainer">
            <div class="trading-stream">
              <!-- 表头 -->
              <div class="trade-header">
                <div class="header-cell time-col">时间</div>
                <div class="header-cell symbol-col">交易对</div>
                <div class="header-cell type-col">类型</div>
                <div class="header-cell strategy-col">策略</div>
                <div class="header-cell amount-col">数量</div>
                <div class="header-cell price-col">价格</div>
                <div class="header-cell pnl-col">盈亏</div>
                <div class="header-cell status-col">状态</div>
              </div>
              
              <div class="trade-body">
                <div 
                  v-for="(trade, index) in recentActivities" 
                  :key="`${trade.time}-${index}`"
                  class="trade-item"
                  :class="{ 
                    'trade-buy': trade.type === '买入', 
                    'trade-sell': trade.type === '卖出',
                    'trade-stop': trade.type === '止损',
                    'new-trade': index === 0 && isNewTrade
                  }"
                >
                  <div class="trade-cell time-col">{{ trade.time }}</div>
                  <div class="trade-cell symbol-col">{{ trade.symbol }}</div>
                  <div class="trade-cell type-col">
                    <el-tag :type="getActivityTagType(trade.type)" size="small">
                      {{ trade.type }}
                    </el-tag>
                  </div>
                  <div class="trade-cell strategy-col">{{ trade.strategy }}</div>
                  <div class="trade-cell amount-col">{{ trade.amount }}</div>
                  <div class="trade-cell price-col">{{ trade.price }}</div>
                  <div class="trade-cell pnl-col">
                    <span :class="{ profit: trade.profit > 0, loss: trade.profit < 0 }">
                      {{ trade.profit > 0 ? "+" : "" }}{{ trade.profit }}%
                    </span>
                  </div>
                  <div class="trade-cell status-col">
                    <el-icon class="status-icon"><SuccessFilled /></el-icon>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 交易统计摘要 -->
            <div class="trading-summary">
              <div class="summary-item">
                <span class="summary-label">今日成交</span>
                <span class="summary-value">23笔</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">今日盈利</span>
                <span class="summary-value profit">+$2,345.67</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">胜率</span>
                <span class="summary-value">73.9%</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 策略状态和收益趋势 - 第二栏 -->
    <el-row :gutter="16" class="bottom-section">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="strategy-status-card full-height-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>策略状态</span>
              <el-button type="text" size="small" @click="$router.push('/trading/strategy')">管理策略</el-button>
            </div>
          </template>
          <div class="strategy-list">
            <div class="strategy-item" v-for="strategy in strategies" :key="strategy.id">
              <div class="strategy-info">
                <div class="strategy-name">{{ strategy.name }}</div>
                <div class="strategy-type">{{ strategy.type }}</div>
              </div>
              <div class="strategy-status-badge">
                <el-tag :type="getStrategyStatusType(strategy.status)" size="small">
                  {{ strategy.status }}
                </el-tag>
                <span class="strategy-pnl" :class="{ profit: strategy.pnl > 0, loss: strategy.pnl < 0 }">
                  {{ strategy.pnl > 0 ? '+' : '' }}{{ strategy.pnl }}%
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <el-card class="chart-card full-height-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>收益趋势</span>
              <div class="chart-controls">
                <el-radio-group v-model="chartPeriod" size="small">
                  <el-radio-button label="1D">1天</el-radio-button>
                  <el-radio-button label="7D">7天</el-radio-button>
                  <el-radio-button label="30D">30天</el-radio-button>
                  <el-radio-button label="90D">90天</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </template>
          <div class="chart-container">
            <!-- Y轴 -->
            <div class="chart-y-axis">
              <div class="y-label" v-for="value in yAxisValues" :key="value">{{ value }}</div>
            </div>
            
            <!-- 图表区域 -->
            <div class="chart-area">
              <!-- 网格线 -->
              <div class="chart-grid">
                <div class="grid-line horizontal" v-for="n in 5" :key="`h-${n}`"></div>
                <div class="grid-line vertical" v-for="n in 7" :key="`v-${n}`"></div>
              </div>
              
              <!-- 收益曲线 -->
              <div class="simple-chart">
                <div class="chart-line">
                  <div 
                    v-for="(item, index) in (chartData as any)[chartPeriod]" 
                    :key="index"
                    class="chart-point"
                    :style="{
                      left: (index / ((chartData as any)[chartPeriod].length - 1)) * 100 + '%',
                      bottom: ((item.value - minValue) / (maxValue - minValue)) * 80 + 10 + '%'
                    }"
                    :title="`${item.time}: $${item.value.toLocaleString()}`"
                  >
                    <div class="point-dot"></div>
                    <div class="point-label">${{ (item.value / 1000).toFixed(1) }}k</div>
                  </div>
                  
                  <!-- 连接线 -->
                  <svg class="connection-lines" width="100%" height="100%">
                    <path 
                      :d="simpleChartPath" 
                      stroke="#67C23A" 
                      stroke-width="3" 
                      fill="none"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <!-- 填充区域 -->
                    <path 
                      :d="simpleChartPath + ` L 100,90 L 0,90 Z`" 
                      fill="url(#simpleGradient)"
                    />
                    
                    <defs>
                      <linearGradient id="simpleGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                        <stop offset="0%" style="stop-color:#67C23A;stop-opacity:0.3" />
                        <stop offset="100%" style="stop-color:#67C23A;stop-opacity:0.1" />
                      </linearGradient>
                    </defs>
                  </svg>
                </div>
              </div>
            </div>
            
            <!-- X轴 -->
            <div class="chart-x-axis">
              <div class="x-label" v-for="time in xAxisTimes" :key="time">{{ time }}</div>
            </div>
            
            <p class="chart-tip">📈 累计收益曲线 - 支持多时间周期切换 | 💡 实时更新交易收益</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from "vue";
import {
  TrendCharts,
  Wallet,
  SetUp,
  Check,
  Clock,
  Connection,
  Position,
  VideoPlay,
  SuccessFilled
} from "@element-plus/icons-vue";

// 市场状态
const marketStatus = ref({
  type: 'success' as const,
  text: '市场开放中'
});

// 最后更新时间
const lastUpdateTime = ref('');

// 图表周期
const chartPeriod = ref('7D');

// 自动滚动控制
const autoScroll = ref(true);
const isNewTrade = ref(false);

// 动态数据
const totalProfitRate = ref(12.34);
const dailyChange = ref('+2.1%');
const totalAssets = ref('45,678.90');
const assetChange = ref('1,234.56');

// 图表数据
const chartData = ref({
  '1D': [
    { time: '00:00', value: 10000 },
    { time: '04:00', value: 10150 },
    { time: '08:00', value: 9920 },
    { time: '12:00', value: 10420 },
    { time: '16:00', value: 10580 },
    { time: '20:00', value: 10650 },
    { time: '24:00', value: 10734 }
  ],
  '7D': [
    { time: '01-15', value: 9500 },
    { time: '01-16', value: 9720 },
    { time: '01-17', value: 9680 },
    { time: '01-18', value: 10050 },
    { time: '01-19', value: 10300 },
    { time: '01-20', value: 10520 },
    { time: '01-21', value: 10734 }
  ],
  '30D': [
    { time: '12-22', value: 8000 },
    { time: '12-29', value: 8350 },
    { time: '01-05', value: 8900 },
    { time: '01-12', value: 9600 },
    { time: '01-19', value: 10100 },
    { time: '01-26', value: 10450 },
    { time: '02-02', value: 10734 }
  ],
  '90D': [
    { time: '11月', value: 6500 },
    { time: '12月', value: 7800 },
    { time: '01月', value: 9200 },
    { time: '02月', value: 10734 }
  ]
});

// Y轴数值
const yAxisValues = computed(() => {
  const currentData = chartData.value[chartPeriod.value as keyof typeof chartData.value];
  const values = currentData.map((item: any) => item.value);
  const min = Math.min(...values);
  const max = Math.max(...values);
  const step = (max - min) / 4;
  
  return [
    `$${Math.round(max).toLocaleString()}`,
    `$${Math.round(max - step).toLocaleString()}`,
    `$${Math.round(max - step * 2).toLocaleString()}`,
    `$${Math.round(max - step * 3).toLocaleString()}`,
    `$${Math.round(min).toLocaleString()}`
  ];
});

// X轴时间
const xAxisTimes = computed(() => {
  const data = chartData.value[chartPeriod.value as keyof typeof chartData.value];
  return data.map((item: any) => item.time);
});

// 当前数据的最小值和最大值
const minValue = computed(() => {
  const currentData = chartData.value[chartPeriod.value as keyof typeof chartData.value];
  const values = currentData.map((item: any) => item.value);
  return Math.min(...values);
});

const maxValue = computed(() => {
  const currentData = chartData.value[chartPeriod.value as keyof typeof chartData.value];
  const values = currentData.map((item: any) => item.value);
  return Math.max(...values);
});

// 简化的图表路径（使用百分比坐标）
const simpleChartPath = computed(() => {
  const currentData = chartData.value[chartPeriod.value as keyof typeof chartData.value];
  const min = minValue.value;
  const max = maxValue.value;
  
  const points = currentData.map((item: any, index: number) => {
    const x = (index / (currentData.length - 1)) * 100;
    const y = 90 - ((item.value - min) / (max - min)) * 80;
    return `${x},${y}`;
  });
  
  return `M ${points.join(' L ')}`;
});

// 交易容器引用
const tradingContainer = ref<HTMLElement>();

// 策略列表
const strategies = ref([
  { id: 1, name: 'BTC蜻蜓策略', type: '趋势跟踪', status: '运行中', pnl: 12.34 },
  { id: 2, name: 'ETH MACD策略', type: '技术指标', status: '暂停', pnl: -2.56 },
  { id: 3, name: '多币种网格', type: '网格交易', status: '运行中', pnl: 8.91 },
  { id: 4, name: 'SOL波动率策略', type: '统计套利', status: '运行中', pnl: 15.67 },
  { id: 5, name: 'BNB均线策略', type: '移动平均', status: '异常', pnl: -0.45 },
]);

// 最近活动数据
const recentActivities = ref([
  {
    time: "10:30:25",
    symbol: "BTC/USDT",
    type: "买入",
    strategy: "BTC蜻蜓策略",
    amount: "0.1234",
    price: "$43,256.78",
    profit: 2.34,
  },
  {
    time: "09:45:12",
    symbol: "ETH/USDT",
    type: "卖出",
    strategy: "ETH MACD策略",
    amount: "2.5678",
    price: "$2,156.90",
    profit: -0.85,
  },
  {
    time: "08:20:45",
    symbol: "SOL/USDT",
    type: "止损",
    strategy: "SOL波动率策略",
    amount: "45.67",
    price: "$89.45",
    profit: -1.23,
  },
  {
    time: "07:15:30",
    symbol: "BNB/USDT",
    type: "买入",
    strategy: "BNB均线策略",
    amount: "12.34",
    price: "$312.45",
    profit: 1.67,
  },
  {
    time: "06:05:18",
    symbol: "ADA/USDT",
    type: "卖出",
    strategy: "多币种网格",
    amount: "1000.0",
    price: "$0.456",
    profit: 3.45,
  },
]);

// 获取活动标签类型
const getActivityTagType = (type: string) => {
  switch (type) {
    case "买入":
      return "success";
    case "卖出":
      return "primary";
    case "止损":
      return "danger";
    default:
      return "info";
  }
};

// 获取策略状态类型
const getStrategyStatusType = (status: string) => {
  switch (status) {
    case "运行中":
      return "success";
    case "暂停":
      return "warning";
    case "异常":
      return "danger";
    default:
      return "info";
  }
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  lastUpdateTime.value = now.toLocaleTimeString('zh-CN');
};

// 切换自动滚动
const toggleAutoScroll = () => {
  autoScroll.value = !autoScroll.value;
};

// 模拟新交易到达
const simulateNewTrade = () => {
  const newTrade = {
    time: new Date().toLocaleTimeString('zh-CN'),
    symbol: `${['BTC', 'ETH', 'SOL', 'BNB', 'ADA'][Math.floor(Math.random() * 5)]}/USDT`,
    type: ['买入', '卖出'][Math.floor(Math.random() * 2)],
    strategy: ['BTC蜻蜓策略', 'ETH MACD策略', '多币种网格', 'SOL波动率策略'][Math.floor(Math.random() * 4)],
    amount: (Math.random() * 10).toFixed(4),
    price: `$${(Math.random() * 50000 + 1000).toFixed(2)}`,
    profit: Number((Math.random() * 10 - 5).toFixed(2)),
  };
  
  recentActivities.value.unshift(newTrade);
  recentActivities.value = recentActivities.value.slice(0, 10); // 保持最新的10条
  
  isNewTrade.value = true;
  setTimeout(() => {
    isNewTrade.value = false;
  }, 2000);
  
  // 自动滚动到顶部
  if (autoScroll.value) {
    nextTick(() => {
      tradingContainer.value?.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }
};

// 处理导出记录点击
const handleExportRecords = () => {
  console.log('导出记录');
};

// 处理查看全部记录点击
const handleViewAllRecords = () => {
  console.log('查看全部记录');
};

onMounted(() => {
  updateTime();
  // 每30秒更新一次时间
  setInterval(updateTime, 30000);
  
  // 模拟实时交易数据 - 每5-15秒随机生成新交易
  setInterval(() => {
    if (Math.random() > 0.3) { // 70%概率生成新交易
      simulateNewTrade();
    }
  }, 8000);
});
</script>

<style lang="scss" scoped>
.dashboard {
  width: 100%;
  max-width: 100%;

  .dashboard-header {
    margin-bottom: 24px;

    .page-title {
      font-size: 28px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin: 0 0 8px 0;
    }

    .page-description {
      color: var(--el-text-color-regular);
      margin: 0 0 16px 0;
      font-size: 16px;
    }

    .market-status {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 12px;

      .last-update {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }

  .stats-row {
    margin-bottom: 24px;

    .el-col {
      margin-bottom: 16px;
    }
  }

  .stats-card {
    height: 100%;
    transition: all 0.3s ease;
    border: none;

    &:hover {
      transform: translateY(-2px);
    }

    .stats-content {
      display: flex;
      align-items: center;
      padding: 0;

      .stats-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        background: var(--el-color-primary-light-8);
        color: var(--el-color-primary);

        &.profit {
          background: linear-gradient(135deg, #67c23a, #85ce61);
          color: white;
        }

        &.asset {
          background: linear-gradient(135deg, #409eff, #66b1ff);
          color: white;
        }

        &.warning {
          background: linear-gradient(135deg, #e6a23c, #eebe77);
          color: white;
        }

        &.success {
          background: linear-gradient(135deg, #67c23a, #85ce61);
          color: white;
        }

        .el-icon {
          font-size: 24px;
        }
      }

      .stats-info {
        flex: 1;

        h3 {
          font-size: 14px;
          color: var(--el-text-color-regular);
          margin: 0 0 4px 0;
          font-weight: normal;
        }

        .stats-value {
          font-size: 24px;
          font-weight: 600;
          margin: 0 0 4px 0;
          color: var(--el-text-color-primary);

          &.profit {
            color: var(--el-color-success);
          }
        }

        .stats-change {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }

  .main-trading-section {
    margin-bottom: 24px;

    .el-col {
      margin-bottom: 16px;
      display: flex;
    }
  }

  .equal-height-card {
    height: 100%;
    display: flex;
    flex-direction: column;

    :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }

  .chart-section {
    margin-bottom: 24px;
  }

  .realtime-trading-card {
    .realtime-trading-container {
      flex: 1;
      display: flex;
      flex-direction: column;

      .trading-stream {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .trade-header {
          display: flex;
          background-color: var(--el-fill-color-light);
          padding: 12px 16px;
          border-bottom: 2px solid var(--el-border-color);
          font-weight: 600;
          font-size: 14px;
          color: var(--el-text-color-primary);
          position: sticky;
          top: 0;
          z-index: 10;
          
          .header-cell {
            display: flex;
            align-items: center;
            
            &.time-col { width: 90px; min-width: 90px; }
            &.symbol-col { width: 110px; min-width: 110px; }
            &.type-col { width: 70px; min-width: 70px; text-align: center; }
            &.strategy-col { width: 140px; min-width: 140px; }
            &.amount-col { width: 100px; min-width: 100px; text-align: right; }
            &.price-col { width: 110px; min-width: 110px; text-align: right; }
            &.pnl-col { width: 90px; min-width: 90px; text-align: right; }
            &.status-col { width: 60px; min-width: 60px; text-align: center; }
          }
        }
        
        .trade-body {
          flex: 1;
          overflow-y: auto;
          max-height: 400px;
          
          .trade-item {
            display: flex;
            padding: 12px 16px;
            border-bottom: 1px solid var(--el-border-color-lighter);
            transition: background-color 0.2s;

            &:hover {
              background-color: var(--el-fill-color-extra-light);
            }

            &:last-child {
              border-bottom: none;
            }

            .trade-cell {
              display: flex;
              align-items: center;
              font-size: 13px;
              
              &.time-col { 
                width: 90px; 
                min-width: 90px; 
                font-weight: 600; 
                color: var(--el-color-primary);
              }
              &.symbol-col { 
                width: 110px; 
                min-width: 110px; 
                font-weight: 600;
              }
              &.type-col { 
                width: 70px; 
                min-width: 70px; 
                justify-content: center;
              }
              &.strategy-col { 
                width: 140px; 
                min-width: 140px;
                font-size: 12px;
                color: var(--el-text-color-regular);
              }
              &.amount-col { 
                width: 100px; 
                min-width: 100px; 
                justify-content: flex-end;
                font-family: 'Monaco', 'Menlo', monospace;
              }
              &.price-col { 
                width: 110px; 
                min-width: 110px; 
                justify-content: flex-end;
                font-family: 'Monaco', 'Menlo', monospace;
              }
              &.pnl-col { 
                width: 90px; 
                min-width: 90px; 
                justify-content: flex-end;
                font-weight: 600;
              }
              &.status-col { 
                width: 60px; 
                min-width: 60px; 
                justify-content: center;
              }
            }

            &.trade-buy {
              .trade-cell.type-col {
                color: var(--el-color-success);
              }
            }

            &.trade-sell {
              .trade-cell.type-col {
                color: var(--el-color-primary);
              }
            }

            &.trade-stop {
              .trade-cell.type-col {
                color: var(--el-color-danger);
              }
            }

            &.new-trade {
              background-color: var(--el-color-primary-light-9);
              animation: newTradeHighlight 2s ease-out;
            }
          }
        }
      }

      .trading-summary {
        padding: 16px;
        background-color: var(--el-bg-color-page);
        border-top: 1px solid var(--el-border-color-lighter);

        .summary-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .summary-label {
            font-weight: 600;
          }

          .summary-value {
            font-weight: 600;

            &.profit {
              color: var(--el-color-success);
            }
          }
        }
      }
    }
  }

  .strategy-status-card {
    .strategy-list {
      flex: 1;

      .strategy-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:last-child {
          border-bottom: none;
        }

        .strategy-info {
          .strategy-name {
            font-weight: 600;
            font-size: 14px;
            color: var(--el-text-color-primary);
          }

          .strategy-type {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            margin-top: 2px;
          }
        }

        .strategy-status-badge {
          text-align: right;

          .strategy-pnl {
            display: block;
            font-size: 12px;
            margin-top: 4px;

            &.profit {
              color: var(--el-color-success);
            }

            &.loss {
              color: var(--el-color-danger);
            }
          }
        }
      }
    }
  }

  .quick-actions-card {
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;

      .action-button {
        padding: 12px 20px;
        font-size: 14px;
        font-weight: 500;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .el-icon {
          margin-right: 8px;
          font-size: 16px;
        }
      }
    }
  }

  .chart-card {
    height: 100%;

    .chart-controls {
      .el-radio-group {
        .el-radio-button {
          font-size: 12px;
        }
      }
    }

    .chart-container {
      height: 400px;
      display: flex;
      flex-direction: column;
      position: relative;
      background: linear-gradient(145deg, var(--el-bg-color-page) 0%, var(--el-bg-color) 100%);
      border-radius: 8px;
      padding: 16px;

      .chart-y-axis {
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 40px;
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .y-label {
          font-size: 11px;
          color: var(--el-text-color-secondary);
          text-align: right;
          padding-right: 8px;
        }
      }

      .chart-area {
        position: absolute;
        left: 70px;
        right: 20px;
        top: 20px;
        bottom: 60px;
        
        .chart-grid {
          position: absolute;
          width: 100%;
          height: 100%;
          
          .grid-line {
            position: absolute;
            
            &.horizontal {
              width: 100%;
              height: 1px;
              background: var(--el-border-color-extra-light);
              
              &:nth-child(1) { top: 0%; }
              &:nth-child(2) { top: 25%; }
              &:nth-child(3) { top: 50%; }
              &:nth-child(4) { top: 75%; }
              &:nth-child(5) { top: 100%; }
            }
            
            &.vertical {
              height: 100%;
              width: 1px;
              background: var(--el-border-color-extra-light);
              
              &:nth-child(6) { left: 0%; }
              &:nth-child(7) { left: 16.67%; }
              &:nth-child(8) { left: 33.33%; }
              &:nth-child(9) { left: 50%; }
              &:nth-child(10) { left: 66.67%; }
              &:nth-child(11) { left: 83.33%; }
              &:nth-child(12) { left: 100%; }
            }
          }
        }
        
        .simple-chart {
          position: absolute;
          left: 70px;
          right: 20px;
          top: 20px;
          bottom: 60px;
          
          .chart-line {
            position: relative;
            width: 100%;
            height: 100%;
            
            .chart-point {
              position: absolute;
              transform: translate(-50%, 50%);
              z-index: 3;
              
              .point-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #67C23A;
                border: 2px solid white;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                transition: all 0.2s ease;
              }
              
              .point-label {
                position: absolute;
                top: -25px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 10px;
                color: var(--el-text-color-secondary);
                background: rgba(255,255,255,0.9);
                padding: 2px 4px;
                border-radius: 4px;
                white-space: nowrap;
                opacity: 0;
                transition: opacity 0.2s ease;
              }
              
              &:hover {
                .point-dot {
                  width: 12px;
                  height: 12px;
                  background: #85ce61;
                }
                
                .point-label {
                  opacity: 1;
                }
              }
            }
            
            .connection-lines {
              position: absolute;
              width: 100%;
              height: 100%;
              z-index: 1;
              viewBox: "0 0 100 100";
              preserveAspectRatio: "none";
            }
          }
        }
      }

      .chart-x-axis {
        position: absolute;
        left: 70px;
        right: 20px;
        bottom: 20px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .x-label {
          font-size: 11px;
          color: var(--el-text-color-secondary);
          text-align: center;
        }
      }

      .chart-tip {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        opacity: 0.8;
        padding: 8px;
      }
    }
  }

  .quick-actions {
    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;

             .action-button {
         padding: 12px 20px;
         font-size: 14px;
         font-weight: 500;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: flex-start;

         .el-icon {
           margin-right: 8px;
           font-size: 16px;
         }
       }
    }
  }

  .table-container {
    overflow-x: auto;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;

    .header-actions {
      display: flex;
      gap: 8px;
    }
  }

  // 卡片高度一致性
  .bottom-section {
    margin-bottom: 24px;

    .full-height-card {
      height: 500px;
      display: flex;
      flex-direction: column;

      :deep(.el-card__body) {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
    }

    .el-col {
      margin-bottom: 16px;
      display: flex;
    }
  }

  .trading-stream-section {
    margin-bottom: 24px;
  }

  .strategy-section {
    margin-bottom: 24px;
  }

  .chart-section {
    margin-bottom: 24px;
  }

  // 新交易高亮动画
  @keyframes newTradeHighlight {
    0% {
      background-color: var(--el-color-primary-light-7);
      box-shadow: 0 0 10px var(--el-color-primary-light-5);
    }
    50% {
      background-color: var(--el-color-primary-light-8);
    }
    100% {
      background-color: transparent;
      box-shadow: none;
    }
  }

  // LIVE 标签样式
  .live-tag {
    margin-left: 8px;
    animation: livePulse 2s ease-in-out infinite;
    
    .el-icon {
      margin-right: 4px;
    }
  }

  @keyframes livePulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }

  // 实时交易头部样式
  .realtime-header {
    .header-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      
      .realtime-icon {
        margin-right: 8px;
        color: var(--el-color-primary);
      }
    }

    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .dashboard {
    .stats-card {
      .stats-content {
        .stats-icon {
          width: 48px;
          height: 48px;

          .el-icon {
            font-size: 20px;
          }
        }

        .stats-info {
          .stats-value {
            font-size: 20px;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard {
    .dashboard-header {
      .page-title {
        font-size: 24px;
      }

      .page-description {
        font-size: 14px;
      }
    }

    .stats-card {
      .stats-content {
        .stats-icon {
          width: 44px;
          height: 44px;
          margin-right: 12px;

          .el-icon {
            font-size: 18px;
          }
        }

        .stats-info {
          .stats-value {
            font-size: 18px;
          }

          h3 {
            font-size: 13px;
          }
        }
      }
    }

    .chart-card {
      .chart-placeholder {
        height: 250px;
      }
    }

    .quick-actions {
      .action-buttons {
        .el-button {
          padding: 10px 16px;
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .dashboard {
    .stats-row {
      .el-col {
        margin-bottom: 12px;
      }
    }

    .stats-card {
      .stats-content {
        padding: 16px;

        .stats-icon {
          width: 40px;
          height: 40px;
          margin-right: 10px;

          .el-icon {
            font-size: 16px;
          }
        }

        .stats-info {
          .stats-value {
            font-size: 16px;
          }

          h3 {
            font-size: 12px;
          }
        }
      }
    }
  }
}

.profit {
  color: var(--trading-profit-color);
}

.loss {
  color: var(--trading-loss-color);
}
</style>
